<template>
  <div class="roll-list-com" id="task-list" v-loading="loading" element-loading-background="rgba(17, 51, 135, 0.8)">
    <div id="vessel" :style="{transform:`translate(0px,-${scrollTop}px)`}">
      <div class="list-item" v-if="item.keyWorkModelList&&item.keyWorkModelList.length>0" v-for="(item,index) in list" :key="item.id">
        <div class="list-title-block">
          <div class="point"></div>
          <div class="list-title">{{item.unitName}}</div>
        </div>
        <div class="list-content">
          <div class="content-item" v-for="(item2,index2) in item.keyWorkModelList" :key="item2.id">
            <div class="content-title-block">
              <div class="num">{{(index2+1).toString().length===1?'0'+(index2+1):(index2+1)}}</div>
              <div class="unit-name">责任单位：<label class="label">{{item.unitName}}</label></div>
<!--              <Light class="light" :color="color[item2.status]"></Light>-->
<!--              <div class="status" :style="`color:${color[item2.status]};`">{{getStatusText(item2.status)}}</div>-->
            </div>
            <div class="content"><span class="label">任务内容：</span>{{item2.task}}</div>
            <div class="progress-situation">
              <span class="label">进展情况：</span>{{item2.evolve}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Light from "../Light/Light.vue";
import {getTaskList} from "../../api/api";

export default {
  name: "RollList",
  components: {Light},
  data() {
    return {
      color:['','#01d7a3','#ffa600','#fa000c'],
      list: [],
      loading:false,
      taskTimer:null,
      scrollTop:0,
    }
  },
  beforeDestroy() {
    clearInterval(this.taskTimer);
  },
  methods:{
    getTask(){
      if(this.loading){
        setTimeout(()=>{
          this.getTask()
        },1000)
        return;
      }
      this.loading=true;
      getTaskList().then(res=>{
        this.list=res
        this.scrollTop=0;
        clearInterval(this.taskTimer);
        this.$nextTick(()=>{
          let vesselHeight=document.getElementById('vessel').offsetHeight;
          let height=document.getElementById('task-list').offsetHeight;
          if(vesselHeight>height){
            this.taskTimer=setInterval(()=>{
              if(height+this.scrollTop<vesselHeight){
                this.scrollTop++;
              }else{
                clearInterval(this.taskTimer);
                this.getTask()
              }
            },100)
          }
        })
      }).finally(()=>{
        this.loading=false
      })
    },
    getStatusText(status){
      if(status==1){
        return '已完成';
      }
      if(status==2){
        return '正在开展';
      }
      if(status==3){
        return '未完成';
      }
      return '';
    }
  },
  mounted() {
    this.getTask()
  }
}
</script>

<style scoped lang="scss">
.roll-list-com::-webkit-scrollbar-track {
  background-color: #F5F5F5
}
.roll-list-com::-webkit-scrollbar {
  width: 0;
  background-color: #F5F5F5
}

.roll-list-com::-webkit-scrollbar-thumb {
  background-color: #999
}
.roll-list-com{
  width: 100%;
  padding: 10px 20px;
  height: 100%;
  overflow: hidden;
  .list-item{
    width: 100%;
    .list-title-block{
      width: 100%;
      display: flex;
      align-items: center;
      height: 22px;
      margin-bottom: 10px;
      .point{
        height: 100%;
        width: 10px;
        border-radius: 12px;
        margin-right: 10px;
        background-image: linear-gradient(#1ae6cb,#11afde);
      }
      .list-title{
        color: #12e5ae;
        font-size: 17px;
        font-weight: bold;
      }
    }
    .list-content{
      width: 100%;
      .content-item{
        border-radius: 8px;
        background: #0f3f93;
        margin-bottom: 15px;
        overflow: hidden;
        .content-title-block{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          margin-top: 15px;
          padding:0 20px;
          height: 26px;
          .num{
            width: 31px;
            height: 25px;
            font-size: 14px;
            color: #fff;
            background: url("/static/images/num.png") no-repeat center;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            padding-left: 5px;
          }
          .light{
            margin-left: auto;
          }
          .unit-name{
            margin-left: auto;
            color: #12e5ae;
            .label{
              color: #fff;
            }
          }
          .status{
            margin-left: 5px;
          }
        }
        .content{
          margin-top: 10px;
          color: #fff;
          line-height: 2;
          padding: 0 20px;
          .label{
            color: #12e5ae;
          }
        }
        .progress-situation{
          width: 100%;
          padding: 15px 20px;
          line-height: 2;
          margin-top: 10px;
          color: #fff;
          background: #0e54a9;
          border-radius: 8px;
          .label{
            color: #12e5ae;
          }
        }
      }
    }
  }
}
</style>
